﻿@using Kugar.UI.Web.AdminLTE.Helpers
@using Kugar.UI.Web.AdminLTE.Helpers.FormExtMethod

@{
    //Layout = null;
}

@using (var form = WebUI.Control.Form().Render())
{
    <style>
        text {
            stroke: #fff;
            stroke-width: 1;
            font-size: 20px;
            text-anchor: middle; /* 文本水平居中 */
            dominant-baseline: central; /* 文本垂直居中 */
        }

        .multi-image-uploader {
            margin: 0px;
            padding: 0px;
            list-style-type: none;
        }

            .multi-image-uploader > .multi-image-uploader-box {
                margin-bottom: 8px;
            }

                .multi-image-uploader > .multi-image-uploader-box > .multi-image-uploader-content {
                    width: 100%;
                    border: #f0f0f0 1px solid;
                }

                    .multi-image-uploader > .multi-image-uploader-box > .multi-image-uploader-content > .multi-image-uploader-img {
                        text-align: center;
                        cursor: pointer;
                    }

        .multi-image-uploader-title {
            padding-left: 5px;
            padding-right: 5px;
        }

            .multi-image-uploader-title > div {
                width: 100%;
                font-size: 14px;
                text-align: center;
                margin-top: 2px;
                margin-bottom: 2px;
                font-size: 14px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                word-break: break-all;
                width: 100%;
                display: inline-block;
            }

        .multi-image-uploader-button {
            padding-bottom: 7px;
            padding-top: 3px;
        }

            .multi-image-uploader-button > div {
                text-align: center
            }
        .multi-image-uploader-button > div >button
         {
             margin-bottom: 1px;
        }
    </style>

    @*@form.AddMultiImageUpload().Name("sdfs").LimitFileCount(10).Render()*@

    using (form.AddCustomContainer().Label("dsfssf").Render())
    {
    <ul class="multi-image-uploader">

        @for (int i = 0; i < 10; i++)
        {
            <li class="multi-image-uploader-box col-xs-2">
                <div class="multi-image-uploader-content">
                    <!--<i class="fa fa-fw fa-arrows handle ui-sortable-handle" style="font-size: 1.3em;color: #23c6c8;position: absolute;"></i> -->
                    <div class="row multi-image-uploader-img">
                        <img width="120" height="120" src="images/24b1c0f7d80f4a7890481af5d4693952.jpeg" />
                        <input type="hidden" name="" value="" />
                    </div>
                    <div class="row multi-image-uploader-button">
                        <div class="col-xs-12">
                            <button class="btn btn-sm btn-lazur viewimage" type="button">查看</button>
                            <button class="btn btn-sm btn-warning editimage" type="button">修改</button>
                            <button class="btn btn-sm btn-danger deleteimage" type="button">删除</button>
                            @*<button class="btn btn-sm btn-danger clearimage" type="button">清除</button>*@
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </li>
        }
        
        <li class="col-xs-2 addimage" style="margin-bottom: 8px;">
            <div style="width: 100%; padding-top: 2em; padding-bottom: 1em;">
                <div class="row" style="text-align: center">
                    <button width="120" height="120" style="cursor: pointer; outline: none; border: none" class="btn btn-link" type="button">
                        <i class="fa fa-fw fa-plus" style="font-size: 8em; color: #23c6c8;"></i>
                    </button>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </li>

        <div class="clearfix"></div>
    </ul>
    }

    @form.AddMultiImageUploader().Label("sdfsdf").Name("sdfsdfs").Disabled().UploadUrl("/Home/UploadFile").LimitFileCount(5).Render()

    @*using (form.AddCustomContainer().Label("dsfssf").Render())
        {
            <ul class="no-margin readonly" style="padding: 0px; list-style-type: none;">

                @for (int i = 0; i < 10; i++)
                {
                    <li class="col-xs-3" style="margin-bottom: 8px;">
                        <div style="width: 100%; border: #f0f0f0 1px solid;">
                            <!--<i class="fa fa-fw fa-arrows handle ui-sortable-handle" style="font-size: 1.3em;color: #23c6c8;position: absolute;"></i> -->
                            <div class="row" style="text-align: center">
                                <img width="120" height="120" style="cursor: pointer" src="images/24b1c0f7d80f4a7890481af5d4693952.jpeg" />
                            </div>
                            <div class="row" style="padding-left: 5px; padding-right: 5px;">
                                <div class="col-xs-12" style="text-align: center; margin-top: 2px; margin-bottom: 2px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; width: 100%; display: inline-block;">
                                    <span style="font-size: 14px;" title="标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</span>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                }
            </ul>
        }*@

    @*using (form.AddCustomContainer().Label("dsfssf").Render())
        {
            <ul class="no-margin readonly" style="padding: 0px; list-style-type: none;">

                @for (int i = 0; i < 10; i++)
                {
                    <li class="col-xs-2" style="margin-bottom: 8px;">
                        <div style="width: 100%; border: #f0f0f0 1px solid;">
                            <!-- <i class="fa fa-fw fa-arrows handle ui-sortable-handle" style="font-size: 1.3em;color: #23c6c8;position: absolute;"></i> -->
                            <div class="row" style="text-align: center">
                                <img width="120" height="120" style="cursor: pointer;border: 0px;" src="images/24b1c0f7d80f4a7890481af5d4693952.jpeg" />
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                }
            </ul>
        }*@
}

@section scripts{ 
        <script>

            //(function ($) {

            //    $.fn.multiImageUploader = function (options) {
            //        var $uploader = $(this);
            //        var defaultName = $uploader.find("input[type=hidden]").attr("name");

            //        var settings = $.extend({
            //            'uploadUrl': '',
            //            'disabled': false,
            //            'enableNew': true,
            //            'accept': "",
            //            'maxFileSize': 0,
            //            'width': 120,
            //            'height': 120,
            //            'colSize': 3,
            //            'name': defaultName
            //        }, options);

            //        var __buildNewItem = function (imageUrl, name, width, height, colSize, editEnabled, deletedEnabled) {
            //            var buttons = "";

            //            if (editEnabled) {
            //                buttons += '<button class="btn btn-sm btn-warning" type="button">修改</button>';
            //                //buttons += '<button class="btn btn-sm btn-danger clearimage" type="button">清除</button>';
            //            }

            //            if (deletedEnabled && maxFileSize<=0) {
            //                buttons += '<button class="btn btn-sm btn-danger" type="button">删除</button>';
            //            }


            //            var temlpate =
            //                '<li class="multi-image-uploader-box col-xs-' + colSize + '">' +
            //                '   <div class="multi-image-uploader-content">' +
            //                '       <div class="row multi-image-uploader-img">' +
            //                '           <img width="' + width + '" height="' + height + '" src="' + imageUrl + '" />' +
            //                '           <input type="hidden" name="' + name + '" value="' + imageUrl + '" />' +
            //                '       </div>' +
            //                //'       <div class="row multi-image-uploader-title">'+
            //                //'           <div class="col-xs-12" style="">'+
            //                //'               <span title="标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</span>'+
            //                //'           </div>'+
            //                //'       </div>'+
            //                '       <div class="row multi-image-uploader-button">' +
            //                '           <div class="col-xs-12">' +
            //                '               <button class="btn btn-sm btn-lazur" type="button">查看</button>' +
            //                buttons +
            //                '           </div>' +
            //                '       </div>' +
            //                '       <div class="clearfix"></div>' +
            //                '   </div>' +
            //                '   <div class="clearfix" ></div > ' +
            //                '</li>';

            //            return $(temlpate);
            //        }

            //        var __refreshItemEvent = function (item) {
            //            var $item = $(item);
            //            var viewBtn = $(item).find(".viewiamge");
            //            var editbtn = $(item).find(".editimage");
            //            var deleteimage = $(item).find(".deleteimage");
            //            var clearimage = $(item).find(".clearimage");

            //            var imageUrl = $item.find("input[type=hidden]").val();

            //            $(viewBtn).click(function () {
            //                WebUIJS.ShowImageViewer(imageUrl);
            //            });

            //            $(editbtn).click(function () {
            //                if (isEmpty(settings.uploadUrl)) { //如果uploadurl为空,则表示需要使用同步上传
            //                    var file = $item.find("input[type=file]");

            //                    if (!file || file.length <= 0) {
            //                        file = $('<input style="display:none" type="file" name="' + settings.name + '"/>');
            //                        if (settings.accept && settings.accept !== "") {
            //                            file.attr("accept", settings.accept);
            //                        }

            //                        file[0].onchange = function () {
            //                            if (this.files.length <= 0) {
            //                                return false;
            //                            }

            //                            if (settings.maxFileSize &&
            //                                settings.maxFileSize > 0 &&
            //                                this.files[0].size > settings.maxFileSize) {

            //                                WebUIJS.Alert("文件太大,不能上传");
            //                                return false;
            //                            }

            //                            try {
            //                                var reader = new FileReader();
            //                                reader.onload = function (evt) {
            //                                    $(item).find("img").attr('src', evt.target.result);
            //                                }

            //                                reader.readAsDataURL(this.files[0]);

            //                            } catch (e) {
            //                                WebUIJS.Toast("加载图片错误:" + e.message, "error", 2);
            //                            }
            //                        }

            //                        file.insertBefore($item.find("img"));
            //                    }


            //                    file.click();
            //                } else {
            //                    WebUIJS.ShowUploadFile(settings.uploadUrl,
            //                        {
            //                            maxFileSize: settings.maxFileSize,
            //                            accept: settings.accept,
            //                            onSuccess: function (ret) {
            //                                if (ret.IsSuccess) {
            //                                    $item.find("img").attr("src", ret.ReturnData);
            //                                    $item.find("input[type=hidden]").val(ret.ReturnData);
            //                                } else {
            //                                    WebUIJS.Alert(ret.Message);
            //                                }
            //                            },
            //                            onCompleted: function () {
            //                                $item.find("button").attr("disabled", null); //开始上传完成之后,取消禁用
            //                            },
            //                            onBeforeUpload: function () {
            //                                $item.find("button").attr("disabled", "disabled"); //开始上传之前,禁用按钮
            //                            },
            //                            onError: function (ret) {
            //                                WebUIJS.Alert(ret.Message);
            //                            }
            //                        });
            //                }


            //            });

            //            $(deleteimage).click(function () {
            //                $item.remove();
            //            });

            //            $(clearimage).click(function () {
            //                $item.find("img").attr("src", "");
            //                $item.find("input[type=hidden]").val('');
            //                if (!settings.uploadUrl || isEmpty(settings.uploadUrl)) {
            //                    $item.find(":file").remove();
            //                }

            //            });
            //        }

            //        $uploader.find(".addimage").click(function () {
            //            if (isEmpty(settings.uploadUrl)) {  //如果uploadurl为空,则表示需要使用同步上传
            //                var file = $('<input style="display:none" type="file" name="' + settings.name + '"/>');

            //                if (settings.accept && settings.accept !== "") {
            //                    file.attr("accept", settings.accept);
            //                }

            //                file[0].onchange = function () {
            //                    if (this.files.length <= 0) {
            //                        file.remove();
            //                        return false;
            //                    }

            //                    if (settings.maxFileSize && settings.maxFileSize > 0 && this.files[0].size > settings.maxFileSize) {
            //                        file.remove();
            //                        WebUIJS.Alert("文件太大,不能上传");
            //                        return false;
            //                    }

            //                    var item = $uploader.__buildNewItem("",
            //                        settings.name,
            //                        settings.width,
            //                        settings.height,
            //                        settings.colSize,
            //                        true,
            //                        true);

            //                    file.insertBefore(item.find("img"));

            //                    try {
            //                        var reader = new FileReader();
            //                        reader.onload = function (evt) {
            //                            $(item).find("img").attr('src', evt.target.result);

            //                            item.insertBefore($uploader.find(".addimage"));

            //                            __refreshItemEvent(item);
            //                        }

            //                        reader.readAsDataURL(this.files[0]);

            //                    } catch (e) {
            //                        //image.attr('src', $(this).val());
            //                        WebUIJS.Toast("加载图片错误:" + e.message, "error", 2);
            //                        file.remove();
            //                        //return;
            //                    }
            //                }

            //                $("body").append(file);

            //                file.click();
            //            } else {
            //                WebUIJS.ShowUploadFile(settings.uploadUrl,
            //                    {
            //                        maxFileSize: settings.maxFileSize,
            //                        accept: settings.accept,
            //                        onSuccess: function (ret) {
            //                            if (ret.IsSuccess) {
            //                                var item = __buildNewItem(ret.ReturnData,
            //                                    settings.name,
            //                                    settings.width,
            //                                    settings.height,
            //                                    settings.colSize,
            //                                    true,
            //                                    true);

            //                                __refreshItemEvent(item);

            //                                item.insertBefore($uploader.find(".addimage"));
            //                            } else {
            //                                WebUIJS.Alert(ret.Message);
            //                            }

            //                        },
            //                        onCompleted: function () {

            //                        },
            //                        onError: function (ret) {
            //                            WebUIJS.Alert(ret.Message);
            //                        }
            //                    });
            //            }

            //        });

            //        var liList = $uploader.find(".multi-image-uploader-box");
            //        for (var i = 0; i < liList.length; i++) {
            //            __refreshItemEvent(liList[i]);
            //        }
                    
            //    };
            //})(jQuery);

            //$(document).ready(function () {

            //    $(".multi-image-uploader").each(function () {
            //        $(this).multiImageUploader({
            //            uploadUrl: "/Home/UploadFile"
            //        });
            //    });
            //});
        </script>
}

